<!--
 * @Author: Leng
 * @Date: 2021-03-12 16:32:36
 * @Description: 火车车次信息展示
 * @FilePath: \vue-leng-demo\node_modules\vue-leng\src\components\module\trainNumInfo.vue
-->

<template>
  <div>
    <ul class="train-numm-info" v-if="data">
      <li>
        <div>{{data.fromDate | date}}</div>
        <div><span v-if="data.fromTime">{{data.fromTime}}</span><span v-else>{{data.fromDate | time}}</span></div>
        <div>{{data.fromStation}}</div>
      </li>
      <li>
        <div>{{data.trainCode}}</div>
        <div class="time-table">
          <svg class="icon-svg" aria-hidden="true" slot="icon">
            <use :xlink:href="'#icon-jiantou3'"></use>
          </svg>
          <span @click="timeTableConf.show = true">时刻表</span>
        </div>
        <div v-if="data.costTimeString">{{data.costTimeString}}</div>
      </li>
      <li>
        <div>{{data.arriveDate | date}}</div>
        <div>{{data.arriveDate | time}}</div>
        <div>{{data.arriveStation}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data () {
    return {
      timeTableConf: {
        show: false
      }
    }
  },
  computed: {
  },
  filters: {
    date (t) {
      if (!t) return
      return moment(t).format('MM月DD日 周dd')
    },
    time (t) {
      if (!t) return
      return moment(t).format('HH:mm')
    }
  }
}
</script>

<style lang='scss' scoped>
  .train-numm-info {
    display: flex;
    align-items: center;
    color: rgba(0,0,0,.65);
    font-size: .7rem;
    background: #fff;
    box-shadow: 0 .2rem .9rem -1px rgba(120, 154, 187, 0.3);
    border-radius: .2rem;
    border-radius: .4rem .4rem 0 0;
    padding: .8rem .6rem;
    li:nth-child(2) {
      flex: 0 0 auto;
      color: rgba(0,0,0,.45);
      font-size: .6rem;
      text-align: center;
    }
    li:first-child, li:last-child {
      flex: 1;
      div:nth-child(2) {
        font-size: 1.2rem;
        color: #333;
      }
    }
    li:last-child {
      text-align: right;
    }
  }
  .icon-svg {
    height: 12px;
    width: 4.7rem;
    fill: #A6A6A6;
  }
  .time-table {
    position: relative;
    margin: .2rem 0;
    span {
      position: absolute;
      top: 0;
      left: 50%;
      display: inline-block;
      width: 2.7rem;
      // height: .8rem;
      line-height: .8rem;
      border: 1px solid #A6A6A6;
      background: #fff;
      transform: translateX(-50%);
      border-radius: .6rem;
    }
  }
</style>
